<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>节流</title>
    <style>
      body {
        height: 2000px;
      }
    </style>
  </head>
  <body>
    <script>
      /*
       * 参考视频：https://www.bilibili.com/video/BV1SU4y1G7Hw/?spm_id_from=autoNext
       */

      //防抖：只执行最后一次
      //节流： 控制执行次数
      //节流作用： 控制高频时间执行次数
      window.onscroll = throttle(function () {
        //业务逻辑代码
        console.log("hello world");
      }, 500);

      /*
       * 利用闭包封装节流函数:
       * fn：函数
       * delay：延迟的时间，单位毫秒
       */
      function throttle(fn, delay) {
        let flag = true;
        return function () {
          if (flag) {
            setTimeout(() => {
              //更改this指向
              fn.call(this);
              flag = true;
            }, delay);
          }
          flag = false;
        };
      }
    </script>
  </body>
</html>
